<template>
  <div class="add_mu_dw">
    <el-drawer
      :modal="false"
      :append-to-body="true"
      :modal-append-to-body="false"
      :wrapperClosable="false"
      size="46%"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <div slot="title">
        <el-select size="small" v-model="simulationType" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 随机的 -->
      <RandomDataSimulation
        :key="simulationType"
        v-if="simulationType == 'RANDOM_DATA_SIMULATION'"
        ref="RandomDataSimulationRef"
        :AnalogSourceObj="AnalogSourceObj"
        :index="index"
        @onSubmit="onSubmit"
        @handleDelSiddhiType="handleDelSiddhiType"
      ></RandomDataSimulation>
      <!-- 数据库 -->
      <Database
        :key="simulationType"
        @handleDelSiddhiType="handleDelSiddhiType"
        ref="DatabaseRef"
        v-if="simulationType == 'DATABASE_SIMULATION'"
        :AnalogSourceObj="AnalogSourceObj"
        :index="index"
        @onSubmit="onSubmit"
      ></Database>
      <!-- 数据库 -->
      <CsvPages
        :key="simulationType"
        @handleDelSiddhiType="handleDelSiddhiType"
        ref="CsvPagesRef"
        v-if="simulationType == 'CSV_SIMULATION'"
        :AnalogSourceObj="AnalogSourceObj"
        :index="index"
        @onSubmit="onSubmit"
      ></CsvPages>
    </el-drawer>
  </div>
</template>

<script>
import RandomDataSimulation from "./RandomDataSimulation.vue";
import CsvPages from "./CsvPages.vue";
import Database from "./Database.vue";
import { typeOptions } from "@/utils/local";
export default {
  components: {
    RandomDataSimulation,
    Database,
    CsvPages,
  },
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    AnalogSourceObj: {
      type: Array,
      default: () => [],
    },
    index: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      simulationType: "RANDOM_DATA_SIMULATION",
      typeOptions: typeOptions,
    };
  },
  methods: {
    handleDelSiddhiType(form) {
      this.$emit("handleDelSiddhiType", form);
    },
    setForm(cloneItem) {
      const { siddhiAppName, streamName, attributeConfList, simulationType } =
        cloneItem;
      this.simulationType = simulationType;

      this.$nextTick(() => {
        if (simulationType == "RANDOM_DATA_SIMULATION") {
          this.$refs.RandomDataSimulationRef.form.siddhiAppName = siddhiAppName;
          this.$refs.RandomDataSimulationRef.form.streamName = streamName;
          this.$refs.RandomDataSimulationRef.form.attributeConfList =
            attributeConfList;
        }
        if (simulationType == "CSV_SIMULATION") {
          this.$refs.CsvPagesRef.form.siddhiAppName = siddhiAppName;
          this.$refs.CsvPagesRef.form.streamName = streamName;
          this.$refs.CsvPagesRef.form.attributeConfList = attributeConfList;
        }
        if (simulationType == "DATABASE_SIMULATION") {
          // 置空,之后会进行赋值,不然会报错
          // 这里赋值,赋不上,在组件内部赋值
          // this.$refs.DatabaseRef.form.listStreams = [];
          // cloneItem.listStreams = [];
          // this.$set(cloneItem, "listStreams", []);
          // this.$set(
          //   cloneItem,
          //   "isTimestampInterval",
          //   cloneItem.timestampInterval ? true : false
          // );
          this.$set(this.$refs.DatabaseRef, "form", cloneItem);
          const { dataSourceLocation, driver, password, username } = cloneItem;

          // 数据库字段都不为空的时候 ,获取表
          if (dataSourceLocation && driver && password && username) {
            this.$refs.DatabaseRef.retrieveTableNames();
          }
          console.log("neItemcloneI,", this.$refs.DatabaseRef.form);
        }
      });
    },
    onSubmit(form) {
      this.$emit("onSubmit", { ...form, simulationType: this.simulationType });
    },
    handleClose() {
      this.$emit("update:drawer", false);
    },
  },
};
</script>
